<template>
	<a-radio-group v-model="value" class="basic-dict w-full" :size="size" :type="type" :disabled="disabled">
		<a-radio v-for="item in options" :key="item.value" :value="item.value">
			{{ item.label }}
		</a-radio>
	</a-radio-group>
</template>

<script setup lang="ts">
interface IEmit {
	(event: "update:modelValue", value: string | number | undefined): void;
}

interface IProps {
	modelValue: string | number | undefined;
	options: LabelValue<string | number>[];
	value?: string | number | boolean;
	type?: "radio" | "button";
	size?: "mini" | "small" | "medium" | "large";
	disabled?: boolean;
	color?: string;
}

const emit = defineEmits<IEmit>();
const props = withDefaults(defineProps<IProps>(), {
	type: "button",
	size: "large",
	value: "number",
	disabled: false,
	color: "#6f6e6f"
});

const value = useVModel(props, "modelValue", emit);
</script>
<style lang="less" scoped>
.basic-dict,
.arco-radio-group-button {
	.arco-radio-button {
		color: v-bind("props.color");
	}
	.arco-radio-button.arco-radio-checked {
		@apply text-2;
	}
}
</style>
